<template>
  <div class="low-page">
    <BaseHeader
      :navs="navs"
      :activeNav="activeNav"
      @nav-change="activeNav = $event"
    />
    <div class="full-width-bg banner-bg">
      <div class="banner-section">
        <el-carousel height="500px">
          <el-carousel-item v-for="item in bannerList" :key="item.id">
            <div
              class="banner-content"
              :style="{ backgroundImage: `url(${item.img})` }"
            >
              <div class="banner-text">
                <h1>{{ item.title }}</h1>
                <p>{{ item.desc }}</p>
              </div>
            </div>
          </el-carousel-item>
        </el-carousel>
      </div>
    </div>
    <!-- 应用场景模块 -->
    <section class="application-scenarios">
      <div class="scenario-blur"></div>
      <div class="scenarios-content">
        <h2 class="scenarios-title">应用场景</h2>
        <p class="scenarios-desc">
          航飞是一家专业无人机的公司，为客户提供无人机航拍策划、拍摄和后期影视制作全流程服务。致力于航拍、宣传片、活动、展会、赛事拍摄，并为地理可视化提供定制化优质的服务。
        </p>
        <div class="scenarios-list">
          <div
            v-for="item in scenarios"
            :key="item.title"
            class="scenario-item"
            :class="{ active: hoverScenario === item.title }"
          >
            <div class="scenario-icon">
              <img :src="item.icon" :alt="item.title" />
            </div>
            <div class="scenario-title">{{ item.title }}</div>
            <div class="scenario-desc">{{ item.desc }}</div>
          </div>
        </div>
      </div>
    </section>

    <section class="teaching-environment">
      <h2>案例展示</h2>
      <p>提供最新的行业资讯</p>
      <div class="environment-grid-box">
        <div class="environment-grid">
          <img src="@/assets/index/eximg.png" alt="航飞无人机教学环境" />
        </div>
        <div class="environment-grid">
          <img src="@/assets/index/ex2.png" alt="航飞无人机教学环境" />
        </div>
        <div class="environment-grid">
          <img src="@/assets/index/ex3.png" alt="航飞无人机教学环境" />
        </div>
        <div class="environment-grid">
          <img src="@/assets/index/eximg.png" alt="航飞无人机教学环境" />
        </div>
        <div class="environment-grid">
          <img src="@/assets/index/ex2.png" alt="航飞无人机教学环境" />
        </div>
        <div class="environment-grid">
          <img src="@/assets/index/ex3.png" alt="航飞无人机教学环境" />
        </div>
      </div>
    </section>
    <!-- 更多服务模块 -->
    <section class="more-service">
      <h2 class="service-title">更多服务</h2>
      <p class="service-desc">提供最新的行业资讯</p>
      <div class="service-list">
        <div
          v-for="(item, index) in serviceList"
          :key="index"
          class="service-card"
        >
          <div class="service-img-box">
            <img :src="item.img" :alt="item.title" />
          </div>
          <div class="service-content">
            <div class="service-card-title">{{ item.title }}</div>
            <div class="service-card-desc">{{ item.desc }}</div>
            <a class="service-link">了解更多 <span>></span></a>
          </div>
        </div>
      </div>
    </section>
    <div class="fly-bg">
      <div class="fly-content">
        <h2>强劲飞行性能</h2>
        <p>
          动力系统：最大水平飞行速度94km/h，最大下降速度9m/s，最大上升速度6m/s，单轴2kg推力，0-80km/h加速时间仅为
          5
          秒，使用高原桨（选配）能在海拔2500米至5000米的高原地带正常飞行。电池系统续航时间长，可在低温自加热功能环境下保证良好性能。
        </p>
      </div>
    </div>
    <BaseFooter />
  </div>
</template>
<script>
import BaseHeader from "@/components/baseHeader.vue";
import BaseFooter from "@/components/baseFooter.vue";
export default {
  name: "low",
  components: { BaseHeader, BaseFooter },
  data() {
    return {
      navs: ["首页", "新闻", "题库", "资料", "产教课程"],
      activeNav: "登录",
      bannerList: [
        {
          id: 1,
          title: "无人机航拍服务",
          desc: "以独特视角捕捉世间万象，为您定格震撼而唯",
          img: require("@/assets/index/dk/baner.png"),
        },
        {
          id: 2,
          title: "无人机航拍服务",
          desc: "以独特视角捕捉世间万象，为您定格震撼而唯",
          img: require("@/assets/index/dk/baner.png"),
        },
        // 添加更多轮播图...
      ],
      scenarios: [
        {
          icon: require("@/assets/index/dk/scene1.png"),
          title: "企业全景拍摄",
          desc: "为企业品牌赋能助力",
        },
        {
          icon: require("@/assets/index/dk/scene2.png"),
          title: "影视剧航拍",
          desc: "打造震撼画面感官",
        },
        {
          icon: require("@/assets/index/dk/scene3.png"),
          title: "宣传片航拍",
          desc: "展示宣传最佳手段",
        },
        {
          icon: require("@/assets/index/dk/scene4.png"),
          title: "大型活动航拍",
          desc: "上帝视角全景表现",
        },
      ],
      hoverScenario: "",
      serviceList: [
        {
          img: require("@/assets/index/dk/service2.png"),
          title: "考无人机驾照很难吗?",
          desc: "考无人机驾照很难吗？其实比你想象的简单！了解考证难度与备考建议，轻松成为专业飞手",
          link: "#",
        },
        {
          img: require("@/assets/index/dk/service2.png"),
          title: "考无人机驾照很难吗?",
          desc: "考无人机驾照很难吗？其实比你想象的简单！了解考证难度与备考建议，轻松成为专业飞手",
          link: "#",
        },
      ],
    };
  },
};
</script>
<style>
.el-carousel__indicators {
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
  gap: 24px;
}

.el-carousel__indicators {
  display: flex !important;
  justify-content: center;
  align-items: center;
  margin-top: 32px;
  gap: 24px;
  position: absolute;
  bottom: 145px;
  left: 416px;
}

.el-carousel__indicator {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

.el-carousel__indicator {
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

.el-carousel__button {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: #e0e3e9;
  transition: background 0.3s;
  margin: 0 4px;
  opacity: 1 !important;
}

.el-carousel__button {
  width: 40px;
  height: 4px;
  border-radius: 2px;
  background: #e0e3e9;
  transition: background 0.3s;
  margin: 0 4px;
  opacity: 1 !important;
}

.el-carousel__indicator.is-active .el-carousel__button {
  background: #2176ff;
}

.el-carousel__indicator.is-active .el-carousel__button {
  background: #2176ff;
}
</style>
<style scoped lang="scss">
.low-page {
  .banner-section {
  }

  .banner-content {
    height: 100%;

    background-size: cover;
    background-position: center;
    display: flex;
    // align-items: center;
    // padding: 0 100px;
  }

  .banner-text {
    width: 1200px;
    margin: 0 auto;
    padding-top: 120px;
    text-align: left;
  }

  .banner-text h1 {
    font-size: 42px;
    font-weight: bold;
    color: #fff;
  }

  .banner-text p {
    font-size: 16px;
    color: #fff;
  }
  .teaching-environment {
    padding: 60px 0 100px 0;
    background: #f5f7fd;
  }
  .environment-grid-box {
    width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 40px;
  }
  .environment-grid {
    width: 386px;
    height: 254px;
    background: #fafbff;
    box-shadow: 0px 4px 60px 0px rgba(0, 69, 207, 0.08);
    border-radius: 12px;
    border: 1px solid #ffffff;
    padding: 20px;
    img {
      width: 100%;
      height: 210px;
    }
  }
  .fly-bg {
    width: 100%;
    height: 288px;
    background: url("@/assets/index/dk/flybg.png") no-repeat;
    background-size: 100% 100%;
    .fly-content {
      width: 1200px;
      margin: 0 auto;
      padding-top: 60px;
      text-align: center;
      h2 {
        font-weight: 600;
        font-size: 36px;
        color: #12192d;
      }
      p {
        font-weight: 400;
        font-size: 16px;
        color: #666;
        line-height: 28px;
      }
    }
  }
  .application-scenarios {
    padding: 60px 0 40px 0;
    background: #fff;
    text-align: center;
    .scenarios-content {
      width: 910px;
      margin: 0 auto;
    }
    .scenarios-title {
      font-size: 32px;
      font-weight: 600;
      color: #222;
      margin-bottom: 12px;
    }
    .scenarios-desc {
      color: #888;
      font-size: 16px;
      margin-bottom: 40px;
    }
    .scenarios-list {
      display: flex;
      justify-content: center;
      gap: 60px;
      margin-top: 20px;
    }
    .scenario-item {
      width: 180px;
      // background: #fafbff;
      border-radius: 12px;
      // border: 1px solid #f0f0f0;
      // box-shadow: 0 2px 16px 0 rgba(0, 69, 207, 0.04);
      padding: 32px 16px 24px 16px;
      transition: box-shadow 0.3s, border 0.3s;
      cursor: pointer;
      .scenario-icon {
        width: 48px;
        height: 48px;
        margin-bottom: 18px;
        margin-left: 50px;
        img {
          width: 48px;
          margin: 0 auto;
        }
      }
      .scenario-title {
        font-size: 18px;
        font-weight: 500;
        color: #222;
        margin-bottom: 8px;
      }
      .scenario-desc {
        font-size: 14px;
        color: #888;
      }
      // &:hover,
      // &.active {
      //   border: 1.5px solid #2176ff;
      //   box-shadow: 0 4px 24px 0 rgba(33, 118, 255, 0.12);
      //   background: #f0f6ff;
      // }
    }
  }
}
.scenario-blur {
  width: 251px;
  height: 176px;
  background: #dcf3fb;
  filter: blur(50px);
  position: absolute;
}
.more-service {
  padding: 60px 0 100px 0;
  background: #fff;
  text-align: center;
  .service-title {
    font-size: 32px;
    font-weight: 600;
    color: #222;
    margin-bottom: 12px;
  }
  .service-desc {
    color: #888;
    font-size: 16px;
    margin-bottom: 40px;
  }
  .service-list {
    display: flex;
    justify-content: center;
    gap: 40px;
    margin-top: 20px;
  }
  .service-card {
    width: 580px;
    padding: 20px;
    background: #fff;
    border-radius: 16px;
    box-shadow: 0px 4px 60px 0px rgba(0, 69, 207, 0.08);
    transition: box-shadow 0.3s, border 0.3s;
    border: 1.5px solid #f3f6fa;
    overflow: hidden;
    text-align: left;
    &:hover {
      box-shadow: 0 12px 48px 0 rgba(33, 118, 255, 0.16);
      border: 1.5px solid #2176ff;
    }
    .service-img-box {
      width: 100%;
      height: 275px;
      background: #f6f8fc;
      border-bottom: 1px dashed #cfe0f7;
      display: flex;
      align-items: center;
      justify-content: center;
      img {
        width: 100%;
        height: 100%;
        object-fit: cover;
      }
    }
    .service-content {
      padding: 20px 0px 18px 0px;
    }
    .service-card-title {
      font-size: 18px;
      font-weight: 700;
      color: #222;
      margin-bottom: 8px;
    }
    .service-card-desc {
      font-size: 14px;
      color: #666;
      margin-bottom: 18px;
    }
    .service-link {
      color: #2176ff;
      font-size: 15px;
      text-decoration: none;
      font-weight: 500;
      transition: color 0.2s;
      &:hover {
        color: #1746a2;
        text-decoration: underline;
      }
      span {
        font-size: 15px;
        margin-left: 2px;
      }
    }
  }
}
</style>
